<template>
  <div id="user">
    <!-- <el-button size="small" type="primary" @click="toAdd">新增</el-button> -->
    <!-- {{ form }} -->
    <el-table
      :data="userData"
      style="width: 100%"
      height="620"
      :header-cell-style="{
        background: 'rgba(255, 255, 224)',
        color: '#606266',
      }"
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <!-- {{ props.row.userFace }} -->
            <el-form-item label="用户相片:">
              <template width="90">
                <img
                  style="width: 80px; height: 80px"
                  :src="props.row.userFace"
                />
              </template>
            </el-form-item>
            <!-- <el-form-item label="用户相片:">
              <span>{{ props.row.userFace }}</span>
            </el-form-item> -->
            <el-form-item label="序号:">
              <span>{{ props.row.id }}</span>
            </el-form-item>
            <el-form-item label="姓名:">
              <span>{{ props.row.realname }}</span>
            </el-form-item>
            <el-form-item label="密码:">
              <span>{{ props.row.password }}</span>
            </el-form-item>
            <el-form-item label="性别:">
              <span>{{ props.row.gender }}</span>
            </el-form-item>
            <el-form-item label="出生日期:">
              <span>{{ moment(props.row.birth).format("YYYY-MM-DD") }}</span>
            </el-form-item>
            <el-form-item label="个性签名:">
              <span>{{ props.row.autograph }}</span>
            </el-form-item>
            <el-form-item label="邮箱:">
              <span>{{ props.row.email }}</span>
            </el-form-item>
            <el-form-item label="地址:">
              <span>{{ props.row.address }}</span>
            </el-form-item>
            <el-form-item label="民族:">
              <span>{{ props.row.nation }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="用户昵称" prop="username" align="center">
      </el-table-column>
      <el-table-column label="联系方式" align="center">
        <template slot-scope="scope">
          <i class="el-icon-phone-outline"></i>
          <span>{{ scope.row.telephone }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="status" align="center">
      </el-table-column>

      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="small"
            @click="toEdit(scope.row)"
            >编辑</el-button
          >
          <el-button
            type="primary"
            icon="el-icon-delete"
            size="small"
            @click="toDelete(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="title" :visible.sync="visible">
      <!-- {{ form }} -->
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="姓名:">
          <el-input v-model="form.realname"></el-input>
        </el-form-item>
        <el-form-item label="性别:">
          <el-radio v-model="form.gender" label="male">男</el-radio>
          <el-radio v-model="form.gender" label="female">女</el-radio>
          <!-- <el-input v-model="form.gender"></el-input> -->
        </el-form-item>
        <el-form-item label="民族:">
          <el-input v-model="form.nation"></el-input>
        </el-form-item>

        <!-- <el-form-column label="出生日期">
          <el-input v-model="form.female"></el-input>
          <span>{{ moment(props.row.birth).format("YYYY-MM-DD") }}</span>
        </el-form-column> -->

        <el-form-item label="用户昵称:">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="密码:">
          <el-input v-model="form.password" type="password"></el-input>
        </el-form-item>
        <el-form-item label="个性签名:">
          <el-input
            v-model="form.autograph"
            type="textarea"
            :rows="2"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系方式:">
          <el-input v-model="form.telephone"></el-input>
        </el-form-item>
        <el-form-item label="邮箱:">
          <el-input v-model="form.email"></el-input>
        </el-form-item>
        <el-form-item label="地址:">
          <el-input v-model="form.address"></el-input>
        </el-form-item>
      </el-form>

      <div class="bt">
        <el-button type="primary" @click="toSave('form')">确 定</el-button>
        <el-button @click="toCancel" position="relative" class="bt2"
          >取 消</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "../utils/request";
let moment = require("moment");
export default {
  data() {
    return {
      src: "",
      userData: [],
      title: "",
      form: {},
      visible: false,
    };
  },
  computed: {},
  methods: {
    moment,
    // toAdd() {
    //   (this.form = {}),
    //     (this.visible = true),
    //     (this.title = "录入新增用户信息");
    // },
    toSave(form) {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          axios.post("/baseUser/saveOrUpdate", this.form).then((res) => {
            if (res.status == 200) {
              this.$notify({
                title: "成功",
                message: "这是一条成功的提示消息",
                type: "success",
              });
              this.findUser();
              this.visible = false;
            } else {
              this.$notify.error({
                title: "失败",
                message: "保存失败",
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    toCancel() {
      this.$refs["form"].resetFields();
      this.visible = false;
    },
    toEdit(row) {
      this.title = "编辑用户信息";
      this.form = {
        ...row,
      };
      this.visible = true;
    },
    toDelete(id) {
      this.$confirm("此操作将永久删除该用户信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          // await等待后面异步函数运行完毕，拿到响应的数据，然后返回
          let res = await axios.get("/baseUser/deleteById", { params: { id } });
          this.$notify({
            title: res.status == 200 ? "删除成功" : "删除失败",
            message: res.statusText,
            type: res.status == 200 ? "success" : "error",
          });
          this.findUser();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    async findUser() {
      let res = await axios.get("/baseUser/findAll");
      this.userData = res.data;
    },
  },
  created() {
    this.findUser();
  },
  mounted() {},
};
</script>
<style scoped>
.demo-table-expand {
  color: #99a9bf;
  font-family: "微软雅黑";
  size: 15px;
}
.demo-table-expand label {
  /* width: 90px; */

  color: black;
}
.demo-table-expand .el-form-item {
  /* margin-right: 0;
  margin-left: 0; */
  margin-bottom: 0;
  /* margin-top: 0; */
  width: 100%;
  /* color: lightyellow; */
}
</style>